<template>
  <div class="container">
    <h3>vue+openlayers: 加载高德地图（多种形式）</h3>
    <h4>
      <el-button type="primary" size="mini" @click="gaode()">默认英文</el-button>
      <el-button type="primary" size="mini" @click="gaode(1)">影像地图</el-button>
      <el-button type="primary" size="mini" @click="gaode(2)">矢量图</el-button>
      <el-button type="primary" size="mini" @click="gaode(3)">影响路网</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile } from 'ol/layer'
import { XYZ } from 'ol/source'
import { useGeographic, fromLonLat, toLonLat, transform } from 'ol/proj'
export default {
  data() {
    return {
      map: null,
      source: new XYZ({})
    }
  },
  mounted() {
    this.initMap()
    this.gaode()
    
      console.log(this.source)
  },
  methods: {
    gaode(n) {
      this.source.clear()
      let url;
      switch(n) {
        case 1: // 影像地图
          url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6'
          break;
        case 2: // 矢量图
          url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
          break;
        case 3: // 影响路网
          url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=en&size=1&scl=1&style=8'
          break;
        default: // 默认英文
          url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=en&size=1&scl=2&style=7'
      }
      this.source.setUrl(url)
    },
    initMap() {
      let gaode = new Tile({ // 图层
        source: this.source
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [gaode],
        view: new View({
          projection: 'EPSG:4326', // 投影坐标系
          center: [116.397128, 39.916527], // 中心点
          zoom: 12 // 缩放级别
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>